<template>
  <div class="scenario-detail-modal">
    <div class="modal-header">
      <div class="scenario-icon">
        <van-icon :name="getScenarioIcon(scenario.category)" size="32" />
      </div>
      <div class="scenario-basic-info">
        <h2>{{ scenario.title || scenario.name }}</h2>
        <p class="category">{{ scenario.category }}</p>
        <div class="rating-info">
          <van-rate v-model="displayRating" readonly size="16" />
          <span class="rating-text">({{ scenario.rating || 4.2 }})</span>
        </div>
      </div>
      <div class="scenario-badges">
        <div class="difficulty-badge" :class="getDifficultyClass(scenario.difficulty_level)">
          {{ getDifficultyText(scenario.difficulty_level) }}
        </div>
        <div class="duration-badge">
          <van-icon name="clock-o" />
          <span>{{ scenario.estimated_duration || 15 }}min</span>
        </div>
      </div>
    </div>

    <div class="modal-content">
      <!-- 场景描述 -->
      <div class="section">
        <h3>Scenario Description</h3>
        <p class="description">{{ scenario.description }}</p>
      </div>

      <!-- 学习目标 -->
      <div class="section">
        <h3>Learning Objectives</h3>
        <div class="objectives-list">
          <div v-for="(objective, index) in getObjectives()" :key="index" class="objective-item">
            <van-icon name="success" />
            <span>{{ objective }}</span>
          </div>
        </div>
      </div>

      <!-- 场景设定 -->
      <div class="section">
        <h3>Scenario Setting</h3>
        <div class="setting-info">
          <div class="setting-item">
            <van-icon name="location-o" />
            <div>
              <h4>Location</h4>
              <p>{{ getScenarioLocation() }}</p>
            </div>
          </div>
          <div class="setting-item">
            <van-icon name="user-o" />
            <div>
              <h4>Your Role</h4>
              <p>{{ getYourRole() }}</p>
            </div>
          </div>
          <div class="setting-item">
            <van-icon name="manager-o" />
            <div>
              <h4>AI Character Role</h4>
              <p>{{ getCharacterRole() }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 示例对话 -->
      <div class="section" v-if="scenario.sample_conversation">
        <h3>Sample Conversation</h3>
        <div class="conversation-preview">
          <div class="message ai-message">
            <div class="message-header">
              <van-image :src="character?.avatar_url || '/default-character.png'" width="32" height="32" round
                fit="cover" />
              <span class="speaker-name">{{ character?.name || 'AI Character' }}</span>
            </div>
            <div class="message-content">{{ scenario.sample_conversation }}</div>
          </div>
          <div class="message user-message">
            <div class="message-header">
              <van-image src="/default-avatar.png" width="32" height="32" round fit="cover" />
              <span class="speaker-name">You</span>
            </div>
            <div class="message-content">{{ getSampleUserResponse() }}</div>
          </div>
        </div>
      </div>

      <!-- 训练技巧 -->
      <div class="section">
        <h3>Training Tips</h3>
        <div class="tips-list">
          <div v-for="(tip, index) in getTrainingTips()" :key="index" class="tip-item">
            <van-icon name="bulb-o" />
            <span>{{ tip }}</span>
          </div>
        </div>
      </div>

      <!-- 完成统计 -->
      <div class="section">
        <h3>Statistics</h3>
        <div class="stats-grid">
          <div class="stat-card">
            <div class="stat-number">{{ scenario.completion_count || 0 }}</div>
            <div class="stat-label">Completions</div>
          </div>
          <div class="stat-card">
            <div class="stat-number">{{ scenario.rating || 4.2 }}</div>
            <div class="stat-label">Average Rating</div>
          </div>
          <div class="stat-card">
            <div class="stat-number">{{ getMessageCount() }}</div>
            <div class="stat-label">Avg Messages</div>
          </div>
          <div class="stat-card">
            <div class="stat-number">{{ getSuccessRate() }}%</div>
            <div class="stat-label">Success Rate</div>
          </div>
        </div>
      </div>
    </div>

    <div class="modal-actions">
      <van-button block type="primary" size="large" @click="handleSelect">
        Start This Scenario
      </van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { TrainingScenario, AiCharacter } from '@/api'

interface Props {
  scenario: TrainingScenario
  character?: AiCharacter | null
}

interface Emits {
  (e: 'select', scenario: TrainingScenario): void
  (e: 'close'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const displayRating = computed(() => Math.round(props.scenario.rating || 4.2))

const getScenarioIcon = (category?: string) => {
  const icons: Record<string, string> = {
    'workplace': 'manager-o',
    'social': 'friends-o',
    'academic': 'certificate',
    'daily': 'home-o',
    'interview': 'contact',
    'presentation': 'chart-trending-o'
  }
  return icons[category?.toLowerCase() || ''] || 'chat-o'
}

const getDifficultyClass = (level: number) => {
  const classes = {
    1: 'difficulty-beginner',
    2: 'difficulty-intermediate',
    3: 'difficulty-advanced'
  }
  return classes[level as keyof typeof classes] || 'difficulty-beginner'
}

const getDifficultyText = (level: number) => {
  const texts = {
    1: 'Beginner',
    2: 'Intermediate',
    3: 'Advanced'
  }
  return texts[level as keyof typeof texts] || 'Beginner'
}

const getObjectives = () => {
  const objectiveMap: Record<string, string[]> = {
    'workplace': [
      'Master professional communication etiquette',
      'Learn to handle workplace conflicts diplomatically',
      'Develop leadership and team collaboration skills',
      'Practice giving and receiving constructive feedback'
    ],
    'social': [
      'Improve casual conversation and small talk skills',
      'Learn to build rapport and connect with others',
      'Develop social awareness and emotional intelligence',
      'Practice active listening and empathy'
    ],
    'academic': [
      'Enhance academic discussion and debate skills',
      'Learn to present ideas clearly and persuasively',
      'Develop critical thinking and analytical communication',
      'Practice asking thoughtful questions'
    ],
    'interview': [
      'Master interview preparation and presentation skills',
      'Build confidence in professional settings',
      'Learn to articulate achievements and goals effectively',
      'Practice handling challenging interview questions'
    ]
  }
  return objectiveMap[props.scenario.category?.toLowerCase() || ''] || [
    'Improve overall communication skills',
    'Build confidence in social interactions',
    'Practice active listening techniques',
    'Develop empathy and emotional intelligence'
  ]
}

const getScenarioLocation = () => {
  const locationMap: Record<string, string> = {
    'workplace': 'Office meeting room or workspace',
    'social': 'Casual social setting like a café or party',
    'academic': 'University classroom or study area',
    'interview': 'Professional office or meeting room',
    'daily': 'Everyday environment'
  }
  return locationMap[props.scenario.category?.toLowerCase() || ''] || 'Virtual environment'
}

const getYourRole = () => {
  const roleMap: Record<string, string> = {
    'workplace': 'Team member or colleague',
    'social': 'Friend or acquaintance',
    'academic': 'Student or researcher',
    'interview': 'Job candidate',
    'daily': 'Individual in daily situation'
  }
  return roleMap[props.scenario.category?.toLowerCase() || ''] || 'Conversation participant'
}

const getCharacterRole = () => {
  const roleMap: Record<string, string> = {
    'workplace': 'Manager or colleague',
    'social': 'Friend or social contact',
    'academic': 'Professor or peer',
    'interview': 'Interviewer or HR representative',
    'daily': 'Service provider or helper'
  }
  return roleMap[props.scenario.category?.toLowerCase() || ''] || 'Conversation partner'
}

const getSampleUserResponse = () => {
  const responses: Record<string, string> = {
    'workplace': 'I appreciate you bringing this up. I think we should consider...',
    'social': 'That sounds really interesting! I\'d love to hear more about...',
    'academic': 'That\'s a fascinating perspective. Could you elaborate on...',
    'interview': 'Thank you for asking. In my previous role, I...',
    'daily': 'I understand. Could you help me with...'
  }
  return responses[props.scenario.category?.toLowerCase() || ''] || 'That\'s a good point. I think...'
}

const getMessageCount = () => {
  const baseCount = Math.floor((props.scenario.estimated_duration || 15) / 2)
  const difficultyMultiplier = props.scenario.difficulty_level * 0.5
  return Math.round(baseCount * (1 + difficultyMultiplier))
}

const getSuccessRate = () => {
  // 根据难度级别模拟成功率
  const rates = {
    1: 85,
    2: 72,
    3: 58
  }
  return rates[props.scenario.difficulty_level as keyof typeof rates] || 75
}

const getTrainingTips = () => {
  const tipMap: Record<string, string[]> = {
    'workplace': [
      'Maintain professional tone throughout the conversation',
      'Listen actively and ask clarifying questions',
      'Be prepared to discuss specific examples and solutions',
      'Show respect for different viewpoints and perspectives'
    ],
    'social': [
      'Be genuine and show interest in the other person',
      'Use open-ended questions to keep the conversation flowing',
      'Share appropriate personal experiences when relevant',
      'Practice active listening and empathy'
    ],
    'academic': [
      'Support your arguments with evidence and examples',
      'Ask thoughtful questions to deepen understanding',
      'Be open to different perspectives and constructive criticism',
      'Maintain intellectual curiosity and respect'
    ],
    'interview': [
      'Prepare specific examples that demonstrate your skills',
      'Ask thoughtful questions about the role and company',
      'Show enthusiasm and genuine interest',
      'Be honest about your experiences and learning goals'
    ]
  }

  return tipMap[props.scenario.category?.toLowerCase() || ''] || [
    'Take your time to think before responding',
    'Focus on clear and respectful communication',
    'Ask questions when you need clarification',
    'Practice makes perfect - don\'t be afraid to make mistakes'
  ]
}

const handleSelect = () => {
  emit('select', props.scenario)
}
</script>

<style lang="scss" scoped>
.scenario-detail-modal {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;

  .modal-header {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    align-items: flex-start;

    .scenario-icon {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;

      .van-icon {
        color: white;
      }
    }

    .scenario-basic-info {
      flex: 1;

      h2 {
        font-size: 24px;
        color: #323233;
        margin: 0 0 8px 0;
        font-weight: 600;
      }

      .category {
        font-size: 16px;
        color: #646566;
        margin: 0 0 12px 0;
        text-transform: capitalize;
      }

      .rating-info {
        display: flex;
        align-items: center;
        gap: 8px;

        .rating-text {
          font-size: 14px;
          color: #969799;
        }
      }
    }

    .scenario-badges {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: flex-end;

      .difficulty-badge {
        padding: 6px 12px;
        border-radius: 16px;
        font-size: 12px;
        font-weight: 500;
        color: white;

        &.difficulty-beginner {
          background: #07c160;
        }

        &.difficulty-intermediate {
          background: #ffd21e;
          color: #323233;
        }

        &.difficulty-advanced {
          background: #ee0a24;
        }
      }

      .duration-badge {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 14px;
        color: #969799;

        .van-icon {
          color: #1989fa;
        }
      }
    }
  }

  .modal-content {
    .section {
      margin-bottom: 24px;

      h3 {
        font-size: 18px;
        color: #323233;
        margin: 0 0 16px 0;
        font-weight: 600;
      }

      .description {
        font-size: 16px;
        color: #646566;
        line-height: 1.6;
        margin: 0;
      }
    }

    .objectives-list {
      .objective-item {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 12px;
        font-size: 15px;
        color: #646566;
        line-height: 1.5;

        &:last-child {
          margin-bottom: 0;
        }

        .van-icon {
          color: #07c160;
          margin-top: 2px;
          flex-shrink: 0;
        }
      }
    }

    .setting-info {
      .setting-item {
        display: flex;
        gap: 12px;
        padding: 16px;
        background: #f7f8fa;
        border-radius: 8px;
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0;
        }

        .van-icon {
          color: #1989fa;
          margin-top: 2px;
          flex-shrink: 0;
        }

        h4 {
          font-size: 16px;
          color: #323233;
          margin: 0 0 4px 0;
          font-weight: 500;
        }

        p {
          font-size: 14px;
          color: #646566;
          margin: 0;
          line-height: 1.4;
        }
      }
    }

    .conversation-preview {
      background: #f7f8fa;
      border-radius: 12px;
      padding: 16px;

      .message {
        margin-bottom: 16px;

        &:last-child {
          margin-bottom: 0;
        }

        .message-header {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 8px;

          .speaker-name {
            font-size: 14px;
            font-weight: 500;
            color: #323233;
          }
        }

        .message-content {
          font-size: 15px;
          color: #646566;
          line-height: 1.5;
          padding: 12px 16px;
          border-radius: 12px;
        }

        &.ai-message .message-content {
          background: white;
          border-radius: 12px 12px 12px 4px;
        }

        &.user-message .message-content {
          background: #e8f4fd;
          border-radius: 12px 12px 4px 12px;
        }
      }
    }

    .tips-list {
      .tip-item {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 12px;
        font-size: 15px;
        color: #646566;
        line-height: 1.5;

        &:last-child {
          margin-bottom: 0;
        }

        .van-icon {
          color: #ffd21e;
          margin-top: 2px;
          flex-shrink: 0;
        }
      }
    }

    .stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;

      .stat-card {
        background: #f7f8fa;
        border-radius: 8px;
        padding: 16px;
        text-align: center;

        .stat-number {
          font-size: 24px;
          font-weight: 600;
          color: #1989fa;
          margin-bottom: 4px;
        }

        .stat-label {
          font-size: 12px;
          color: #969799;
        }
      }
    }
  }

  .modal-actions {
    padding-top: 20px;
    border-top: 1px solid #ebedf0;
  }
}
</style>